/**
 * createTime: 2018/9/3 11:36
 * author: zhibin.zhao
 * description:
 */
// 中国地图配置
var mapOption = {
  visualMap: {
    min: 0,
    max: 1000,
    left: "left",
    top: "bottom",
    text: ["高", "低"],
    calculable: true,
    orient: "horizontal",
    inRange: {
      color: ["#eeddff", "#006edd"]
    },
    show: false
  },
  geo: {
    map: "china",

    regions: [{
      name: "南海诸岛",
      itemStyle: {
        opacity: 0,
        normal: {
          label: {
            show: true
          }
        }
      }
    }]
  },
  series: [{
      type: "map",
      mapType: "china",
      coordinateSystem: "geo",
      itemStyle: {
        normal: {
          areaColor: "#517fe5",
          borderColor: "#FFF"
        },
        emphasis: {
          areaColor: "#e06c33"
        }
      },
      label: {
        // 文字
        show: false,
        color: "#fff"
      }
    },
    {
      type: "map",
      geoIndex: 0
    }
  ]
};

// 省市地图配置
var provinceOption = {
  visualMap: {
    min: 0,
    max: 1000,
    left: "left",
    top: "bottom",
    text: ["高", "低"],
    calculable: true,
    orient: "horizontal",
    inRange: {
      color: ["#eeddff", "#006edd"]
    },
    show: false
  },
  series: [{
      type: "map",
      map: "",
      label: {
        // 文字
        show: false,
        color: "#fff"
      },
      itemStyle: {
        normal: {
          areaColor: "#517fe5",
          borderColor: "#00effc",
          borderWidth: 1.5
        },
        emphasis: {
          areaColor: "#e06c33"
        }
      }
    },
    {
      type: "map",
      geoIndex: 0
    }
  ]
};
// 饼图配置
var pieOption = {
  color: ["#2791ce", "#15338a", "#0b156e", "#1a084d", "#27ceb4"],
  legend: {
    x: "center",
    y: "center",
    orient: "vertical",
    align: "auto",
    textStyle: {
      color: "#27e9ec",
      fontSize: 20
    },
    data: []
  },
  series: [{
    type: "pie",
    radius: "50%",
    center: ["25%", "50%"],
    data: [],
    roseType: "radius",
    label: {
      normal: {
        show: false,
        position: "inside",
        color: "#fff"
      },
      emphasis: {
        show: true,
        formatter: "{d}%",
        color: "yellow"
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        shadowBlur: 200,
        shadowColor: "rgba(0, 0, 0, 0.5)"
      },
      emphasis: {
        fontSize: 28
      }
    }
  }]
};

// 环形图配置
var ringOption = {
  color: ["#27ceb4", "red"],
  series: [{
    // name: '访问来源',
    type: "pie",
    radius: ["60%", "68%"],
    center: ["30%", "50%"],
    avoidLabelOverlap: false,
    label: {
      color: "#fff",
      normal: {
        show: true,
        position: "center",
        formatter: "{b}%",
        textStyle: {
          fontSize: "48",
          fontWeight: "bold",
          color: "yellow"
        }
      },
      emphasis: {
        show: false,
        textStyle: {
          fontSize: "30",
          fontWeight: "bold"
        }
      }
    },
    labelLine: {
      nomal: {
        show: true
      }
    },
    data: []
  }]
};
// 柱状图配置
var barlineOption = {
  grid: {
    top: "20%",
    left: "100",
    bottom: "15%",
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none"
    }
  },
  xAxis: [{
      type: "category",
      show: false,
      data: [],
      axisLabel: {
        textStyle: {
          color: "#b6b5ab",
          fontSize: "60",
          fontWeight: "bold"
        }
      }
    },
    {
      type: "category",
      offset: 150,
      position: "bottom",
      data: {},
      name: "小时",
      nameLocation: "end",
      nameTextStyle: {
        color: "#00fcff",
        fontSize: 24
      },
      boundaryGap: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#00fcff",
          width: 5
        }
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#b6b5ab"
        }
      }
    }
  ],
  yAxis: [{
      show: true,
      name: "当日连带率",
      nameTextStyle: {
        color: "#00fcff",
        fontSize: 24
      },
      offset: 0,
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,0.2)"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#00fcff",
          width: 5
        }
      },
      axisLabel: {
        show: false,
        color: "#b6b5ab"
      }
    },
    {
      show: false,
      type: "value",
      name: "合格率(%)",
      nameTextStyle: {
        color: "#ccc"
      },
      axisLabel: {
        color: "#ccc"
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  color: ["#e54035"],
  series: [{
      type: "pictorialBar",
      xAxisIndex: 1,
      barMaxWidth: "170%",
      barCategoryGap: "-80%",
      symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = [
              "rgba(13,177,205,0.8)",
              "rgba(29,103,182,0.6)",
              "rgba(13,177,205,0.8)",
              "rgba(29,103,182,0.6)",
              "rgba(13,177,205,0.8)",
              "rgba(29,103,182,0.6)"
            ];
            return colorList[params.dataIndex];
          }
        },
        emphasis: {
          opacity: 1
        }
      },
      data: []
    },
    {
      symbol: "image://",
      symbolSize: 42,
      name: "连带率",
      type: "line",
      yAxisIndex: 1,
      data: [],
      itemStyle: {
        normal: {
          borderWidth: 5,
          color: {
            colorStops: [{
                offset: 0,
                color: "#821eff"
              },

              {
                offset: 1,
                color: "#204fff"
              }
            ]
          }
        }
      }
    }
  ]
};
// 取0-1000之间的随机数
function randomValue(id, index) {
  if (id > 1000) {} else {}

  return Math.round(Math.random() * 500);
}

function copyOption(options) {
  return Object.assign({}, options);
}
// 创建饼图与环形图
function creatChart(id, options) {
  if (!id instanceof String) {
    id = id.toString();
  }
  var chart = echarts.init(document.getElementById(id));
  chart.setOption(options);
  chart.update = function (data) {
    var copyRoption = {};
    if (data instanceof Array) {
      copyRoption = this.getOption();
      if (copyRoption.legend) {
        data.forEach(function (item) {
          copyRoption.legend[0].data.push(item.name);
        });
      }
      copyRoption.series[0].data = data;
    } else {
      var dataObj = [{
          name: "",
          value: 0,
          label: {
            normal: {
              show: true
            }
          }
        },
        {
          name: "",
          value: 0,
          label: {
            normal: {
              show: false
            }
          }
        }
      ];
      copyRoption = copyOption(ringOption);
      if (data > 1) {
        dataObj[0].value = 1;
        dataObj[1].value = 0;
        copyRoption.series[0].label.normal.textStyle.color = "#27ceb4";
      } else if (data < 0 && !Math.abs(data) > 1) {
        dataObj[0].value = 0;
        dataObj[1].value = 1;
        copyRoption.series[0].label.normal.textStyle.color = "red";
      } else if (data < 0 && Math.abs(data) < 1) {
        dataObj[0].value = 1 + data;
        dataObj[1].value = Math.abs(data);
        copyRoption.series[0].label.normal.textStyle.color = "red";
      } else {
        dataObj[0].value = data;
        dataObj[1].value = 1 - data;
        copyRoption.series[0].label.normal.textStyle.color = "#27ceb4";
      }
      dataObj[0].name = data * 100 + "";

      ringOption.series[0].data = dataObj;
    }
    this.setOption(copyRoption);
  };
  return chart;
}
// 创建地图实例
function creatChinaMap(data) {
  var chart = echarts.init(document.getElementById("chinaMap"));
  data.forEach((element, index) => {
    element.value = element.id * index;
  });
  var option = copyOption(mapOption);
  option.series[0].data = data;
  option.series[1].data = data;
  chart.setOption(option);
  chart.click = function (callback) {
    this.on("click", function (province) {
      var options = this.getOption();
      selectedDefault(options, province);
      this.setOption(options);
      callback(province);
      console.log(province.name);
    });
  };
  return chart;
}
// 创建省份地图实例
function creatProvinceMap(province, data) {
  var provinceMap = {};
  var name = province ? province.name : "北京";
  echarts.registerMap(name, data);
  provinceMap = echarts.init(document.getElementById("province"));
  var option = copyOption(provinceOption);
  option.series[0].map = name;
  options = resetProvince(option, data, province);
  provinceMap.setOption(option);
  provinceMap.update = function (province, data) {
    var options = this.getOption();
    echarts.registerMap(province.name, data);
    options.series[0].map = province.name;
    options = resetProvince(options, data, province);
    provinceMap.setOption(options);
  };
  provinceMap.click = function (callback) {
    this.on("click", function (params) {
      var options = this.getOption();
      selectedDefault(options, params);
      this.setOption(options);
      callback(params);
    });
  };
  return provinceMap;
}
// 重置省份数据
function resetProvince(options, data, province) {
  var children = [];
  console.log("provinceUpdate", province);
  var sid = province.sid ? province.sid : province.data.sid;
  console.log("sId", sid);

  data.features.forEach(function (item, index) {
    var obj = {};
    obj.id = item.properties.id;
    obj.name = item.properties.name;
    obj.value = randomValue(obj.id, index);
    if (obj.id === sid || obj.id + "00" === sid) {
      obj.selected = true;
      console.log("city", obj.name);
      console.log("cityId", obj.id);
    }
    children.push(obj);
  });
  options.series[0].data = children;
  options.series[1].data = children;
  console.log("child", children);
  return options;
}
// 设置默认选中
function selectedDefault(options, province) {
  options.series.forEach(function (serie) {
    serie.data.forEach(function (item) {
      if (item.name === province.name) {
        item.selected = true;
      } else {
        item.selected = false;
      }
    });
  });
}

// 创建柱状图折线图
function creatLineBar(data) {
  var chart = echarts.init(document.getElementById("linebar"));
  chart.update = function (data) {
    let xAxisMonth = [],
      barData = [],
      lineData = [];
    for (let i = 0; i < data.length; i++) {
      xAxisMonth.push(data[i].ordHour);
      barData.push({
        name: xAxisMonth[i],
        value: data[i].perQtyRate
      });
      lineData.push({
        name: xAxisMonth[i],
        value: data[i].perQtyRate
      });
    }
    var option = copyOption(barlineOption);
    option.xAxis[1].data = xAxisMonth;
    option.series[0].data = barData;
    option.series[1].data = lineData;
    this.setOption(option);
  };
  if (data) {
    chart.upadte(data);
  }
  return chart;
}

function refreshData(e, $this) {
  $($this).addClass("rotating1");

  setTimeout(function () {
    $($this).removeClass("rotating1");
  }, 5000);
  location.reload(true);
}

function stopScale(event) {
  console.log("scale", event);
  event.stopPropagation();
  event.preventDefault();
}